<template>
  <div>
    <div class="data-table" ref="print">
      <h2>顺丰商贸有限公司送（提）货单</h2>
      <div class="customer-card">
        <span>客户：</span>
        <span>99412</span>
        <span>耙冲吃喝玩乐研究所（伯友茶记）</span>
      </div>
      <el-table
        border
        @cell-mouse-enter="mouseenterEvent"
        @cell-mouse-leave="mouseleaveEvent"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="spnumber"
          label="商品编号">
        </el-table-column>
        <el-table-column
          prop="spname"
          label="商品名">
          <template slot-scope="scope">
            <span v-if="!editIndex.includes(scope.row)">{{scope.row.spname}}</span>
            <el-input size="small" v-else v-model="scope.row.spname"></el-input>
            <img src="../../assets/edit.svg" class="edit-button" @click="editThis(scope)" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="gg"
          label="规格">
        </el-table-column>
        <el-table-column
          prop="dw"
          label="单位">
        </el-table-column>
        <el-table-column
          prop="dj"
          label="单价">
        </el-table-column>
        <el-table-column
          prop="sl"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="xj"
          label="小计">
        </el-table-column>
        <el-table-column
          prop="tip"
          label="备注">
        </el-table-column>
      </el-table>
    </div>
    <el-button @click="printqq">打印</el-button>
  </div>

</template>

<script>

export default {
  name: "index",
  data(){
    return{
      tableData:[
        {
          spnumber: '00001',
          spname: '家乐鸡粉1kg装',
          gg: '1 * 12',
          dw: '件',
          dj: 12.75,
          sl: 2,
          xj: 25.50,
          tip: ''
        },
        {
          spnumber: '00001',
          spname: '家乐鸡粉1kg装',
          gg: '1 * 12',
          dw: '件',
          dj: 12.75,
          sl: 2,
          xj: 25.50,
          tip: ''
        },
        {
          spnumber: '00001',
          spname: '家乐鸡粉1kg装',
          gg: '1 * 12',
          dw: '件',
          dj: 12.75,
          sl: 2,
          xj: 25.50,
          tip: ''
        }
      ],
      editIndex:[]
    }
  },
  methods:{
    printqq(){
      this.$print(document.querySelector('.data-table'))
      // window.print()
    },
    mouseenterEvent(row, column, cell, event){
      let editButton = cell.querySelector('.edit-button')
      if(editButton){
        editButton.style.visibility = 'visible'
      }
    },
    mouseleaveEvent(row, column, cell, event){
      let editButton = cell.querySelector('.edit-button')
      if(editButton){
        editButton.style.visibility = 'hidden'
      }
    },
    editThis(e){
      this.editIndex.push(e.row)
    }
  },
  mounted() {
    addEventListener('mouseup',(e)=>{
      this.editIndex = []
    })
  }
}
</script>

<style lang="scss" scoped>
  .data-table{
    margin:20px;
    text-align: center;
  }

  .customer-card{
    text-align: left;
    font-size: 12px;
    span{
      margin: 0 5px;
    }
  }

  .edit-button{
    visibility: hidden;
    float: right;
    cursor: pointer;
    width: 20px;
    height: 20px;
  }
</style>
